<template>
    <div class="search">
        <div class="search-obj">
            <div class="title">模型名称:</div> <el-input v-model="orgName" style="width: 300px" placeholder="模型名称" />
        </div>
        <div class="search-obj">
            <div class="title"> 上线状态:</div> <el-select v-model="channel" placeholder="上线状态" style="width: 300px"
                clearable>
                <el-option v-for="item in channelList" :key="item.value" :label="item.label" :value="item.value"
                    :disabled="item.disabled" />
            </el-select>
        </div>
        <div class="search-obj">
            <div class="title">审核状态:</div>
            <el-select v-model="target" placeholder="审核状态" style="width: 300px" clearable>
                <el-option v-for="item in targetlList" :key="item.value" :label="item.label" :value="item.value"
                    :disabled="item.disabled" />
            </el-select>
        </div>
    </div>
    <div class="submit">
        <el-button color="rgba(200, 16, 46, 100)">查询</el-button>
        <el-button color="rgb(220,220,220)" @click="clearable">重置</el-button>
    </div>
    <el-divider border-style="double" />

    <div class="table">
        <el-table :data="data" style="width: 100%;" stripe :header-cell-style="tableHeaderStyle">
            <el-table-column prop="modelName" label="模型名称" min-width="180" align="center" />
            <el-table-column prop="order" label="顺序" min-width="180" align="center" />
            <el-table-column prop="createTime" label="创建时间" min-width="280" align="center" />
            <el-table-column prop="updateTime" label="最后修改时间" min-width="180" align="center" />
            <el-table-column prop="checkTime" label="最后审核时间" min-width="180" align="center" />
            <el-table-column prop="checkUser" label="审核人" min-width="180" align="center" />
            <el-table-column prop="upStatus" label="上线状态" min-width="180" align="center" />
            <el-table-column prop="checkStatus" label="审核状态" min-width="180" align="center" />
            <el-table-column label="操作" fixed="right" min-width="320" align="center">
                <template v-slot="scope">
                    <el-button color="rgb(255,200,71)" @click="reportPage(scope.row.modelName)">查看</el-button>
                    <el-button color="rgb(255,200,71)" @click="reportPage(scope.row.modelName)">启用</el-button>
                    <el-button color="rgb(255,200,71)" @click="reportPage(scope.row.modelName)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const tableHeaderStyle = ref({ background: '#f3f6fd', color: '#555' })
let data = ref([
    {
        modelName: "风控模型1",
        order: 1,
        createTime: "2024-10-10 15:37:25",
        updateTime: "2024-10-10 15:37:25",
        checkTime: "2024-10-10 16:37:25",
        checkUser: "张三",
        upStatus: "已启用",
        checkStatus: "已审核"
    }, {
        modelName: "风控模型2",
        order: 1,
        createTime: "2024-10-10 15:37:25",
        updateTime: "2024-10-10 15:37:25",
        checkTime: "2024-10-10 16:37:25",
        checkUser: "张三",
        upStatus: "已启用",
        checkStatus: "已审核"
    }, {
        modelName: "风控模型3",
        order: 2,
        createTime: "2024-10-10 15:37:25",
        updateTime: "2024-10-10 15:37:25",
        checkTime: "2024-10-10 16:37:25",
        checkUser: "张三",
        upStatus: "已启用",
        checkStatus: "已审核"
    }, {
        modelName: "风控模型4",
        order: 3,
        createTime: "2024-10-10 15:37:25",
        updateTime: "2024-10-10 15:37:25",
        checkTime: "2024-10-10 16:37:25",
        checkUser: "张三",
        upStatus: "已启用",
        checkStatus: "已审核"
    }, {
        modelName: "风控模型5",
        order: 3,
        createTime: "2024-10-10 15:37:25",
        updateTime: "2024-10-10 15:37:25",
        checkTime: "2024-10-10 16:37:25",
        checkUser: "张三",
        upStatus: "已启用",
        checkStatus: "已审核"
    }, {
        modelName: "风控模型6",
        order: 3,
        createTime: "2024-10-10 15:37:25",
        updateTime: "2024-10-10 15:37:25",
        checkTime: "2024-10-10 16:37:25",
        checkUser: "张三",
        upStatus: "已启用",
        checkStatus: "已审核"
    }, {
        modelName: "风控模型7",
        order: 4,
        createTime: "2024-10-10 15:37:25",
        updateTime: "2024-10-10 15:37:25",
        checkTime: "2024-10-10 16:37:25",
        checkUser: "张三",
        upStatus: "已启用",
        checkStatus: "已审核"
    }, {
        modelName: "风控模型8",
        order: 4,
        createTime: "2024-10-10 15:37:25",
        updateTime: "2024-10-10 15:37:25",
        checkTime: "2024-10-10 16:37:25",
        checkUser: "张三",
        upStatus: "已启用",
        checkStatus: "已审核"
    },
])

const reportPage = (param) => {
    router.push("/AntecedentModelInfoPage?orderNo=" + param)
}
</script>
<style scoped lang="scss">
.search {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 40px;
    margin-left: 40px;


    .search-obj {
        margin-left: 80px;
        margin-top: 40px;
        width: 400px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        justify-self: center;

        .title {
            width: 200px;
            align-content: center;
            text-align: end;
            margin-right: 10px;
        }
    }


}

.submit {
    position: absolute;
    right: 100px;
    margin-top: 20px;
}

.el-divider {
    margin-top: 100px;
}
</style>